<template>
  <el-row  :gutter="20">
    <el-col :span="6">
      <el-card>
        <el-statistic  :value="outputTotalIntercept" >
          <template #title>
            <h3>总风险拦截</h3>
            <el-icon style="margin-left: 4px" :size="12">
              <WarningFilled />
            </el-icon>
          </template>
          <template #suffix>次</template>
        </el-statistic>
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card >
        <el-statistic  :value="outputSecurityProtection" >
          <template #title>
            <h3>安全保护</h3>
            <el-icon style="margin-left: 4px" :size="12">
              <WarningFilled />
            </el-icon>
          </template>
          <template #suffix>天</template>
        </el-statistic>
      </el-card>

    </el-col>

    <el-col :span="6">
      <el-card >
        <el-statistic  :value="outputIpIntercept" >
          <template #title>
            <h3>IP拦截</h3>
            <el-icon style="margin-left: 4px" :size="12">
              <WarningFilled />
            </el-icon>
          </template>
          <template #suffix>次</template>
        </el-statistic>
      </el-card>

    </el-col>

    <el-col :span="6">
      <el-card >
        <el-statistic  :value="outputUrlIntercept" >
          <template #title>
            <h3>URL拦截</h3>
            <el-icon style="margin-left: 4px" :size="12">
              <WarningFilled />
            </el-icon>
          </template>
          <template #suffix>次</template>
        </el-statistic>
      </el-card>

    </el-col>

    <el-col :span="6">
      <el-card >
        <el-statistic  :value="outputUserAgentIntercept" >
          <template #title>
            <h3>UserAgent拦截</h3>
            <el-icon style="margin-left: 4px" :size="12">
              <WarningFilled />
            </el-icon>
          </template>
          <template #suffix>次</template>
        </el-statistic>
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card>
        <el-statistic  :value="outputAreaIpIntercept" >
          <template #title>
            <h3>区域IP拦截</h3>
            <el-icon style="margin-left: 4px" :size="12">
              <WarningFilled />
            </el-icon>
          </template>
          <template #suffix>次</template>
        </el-statistic>
      </el-card>

    </el-col>

    <el-col :span="6">
      <el-card>
        <el-statistic  :value="outputCcAttack" >
          <template #title>
            <h3>CC攻击</h3>
            <el-icon style="margin-left: 4px" :size="12">
              <WarningFilled />
            </el-icon>
          </template>
          <template #suffix>次</template>
        </el-statistic>
      </el-card>
    </el-col>
  </el-row>
  <div style="display: flex; align-items: center; justify-content: space-between;">
    <el-text type="info">优先级: IP拦截 > URL拦截 > UserAgent拦截 > 区域IP拦截 > CC攻击</el-text>
    <el-button  :icon="Refresh" @click="refreshHandle"/>
  </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useTransition } from '@vueuse/core'
import {WarningFilled, Refresh} from "@element-plus/icons-vue";
import {
  getStatistics
} from "/@/api/system/ipfilter/filterConfig";
import {ElMessage} from "element-plus";

//总风险拦截
const totalIntercept = ref(0)
const outputTotalIntercept = useTransition(totalIntercept, {
  duration: 1500,
})
totalIntercept.value = 0

//安全保护
const securityProtection = ref(0)
const outputSecurityProtection = useTransition(securityProtection, {
  duration: 1500,
})
securityProtection.value = 0

// IP拦截
const ipIntercept = ref(0)
const outputIpIntercept = useTransition(ipIntercept, {
  duration: 1500,
})
ipIntercept.value = 0

//URL拦截
const urlIntercept = ref(0)
const outputUrlIntercept = useTransition(urlIntercept, {
  duration: 1500,
})
urlIntercept.value = 0

//UserAgent拦截
const userAgentIntercept = ref(0)
const outputUserAgentIntercept = useTransition(userAgentIntercept, {
  duration: 1500,
})
userAgentIntercept.value = 0

//区域IP拦截
const areaIpIntercept = ref(0)
const outputAreaIpIntercept = useTransition(areaIpIntercept, {
  duration: 1500,
})
areaIpIntercept.value = 0

//CC攻击
const ccAttack = ref(0)
const outputCcAttack = useTransition(ccAttack, {
  duration: 1500,
})
ccAttack.value = 0


const refreshHandle = ()=> {
  getStatistics().then((res:any)=> {
    //console.log(res)
    const {code, data, message} = res
    if (code === 0) {
      if (data.statistics) {
        totalIntercept.value =  data.statistics.totalIntercept
        securityProtection.value = Math.floor(data.statistics.runTime)
        ipIntercept.value = data.statistics.ipIntercept
        urlIntercept.value = data.statistics.urlIntercept
        userAgentIntercept.value = data.statistics.userAgentIntercept
        areaIpIntercept.value = data.statistics.areaIntercept
        ccAttack.value = data.statistics.ccIntercept
      }

    } else {
      ElMessage.error(message || "配置信息获取错误")
    }
  })
}

onMounted(()=> {
  refreshHandle()
})
</script>

<style scoped lang="scss">
  .el-col {
    text-align: center;
  }
  .el-card {
    width:100%;
    margin-bottom: 20px;
  }

  h3 {
    display: inline-block;
  }
</style>